<template>
  <div class="user-info page-exp">
    <pageHeader></pageHeader>
    <div class="user-content">
      <div class="user-title">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/personalcenter/newList', query: { newId } }">新闻资讯</el-breadcrumb-item>
          <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="container">
        <div class="wrap">
          <h1>{{ title }}</h1>
          <h3 style="margin-top:10px">作者：中铁一局新运工程有限公司宣传部</h3>
          <p class="time">{{ tool.timeCycle(time) }}</p>
          <p v-html="content"></p>
          <h3 style="text-align:right">文章来源：中铁一局新运工程有限公司宣传部</h3>
        </div>
      </div>
    </div>
    <PageFooter></PageFooter>
  </div>
</template>

<script>
import pageHeader from "@/components/PageHeader.vue";
import PageFooter from "@/components/PageFooter.vue";
export default {
  components: {
    pageHeader,
    PageFooter
  },
  created() {
    let info = JSON.parse(this.$route.query.info);
    this.getDetail(info);
  },
  data() {
    return {
      title: this.$route.query.title,
      time: this.$route.query.time,
      newId: this.$route.query.newId,
      content: ""
    };
  },
  methods: {
    getDetail(info) {
      let that = this;
      let time = new Date().valueOf();
      that
        .$http({
          url: "/wisdomlearn/information/selectAllInformation",
          method: "post",
          headers: {
            accessToken: that.config.token,
            appId: that.config.appId,
            userId: JSON.parse(that.tool.getCookie("xinyun-front-userInfo")).userId,
            clientId: "",
            sign: that.tool.sign("/wisdomlearn/information/selectAllInformation", time),
            timestamp: time
          },
          data: {
            columnId: that.newId,
            pageIndex: info.page + "",
            pageSize: info.limit + ""
          }
        })
        .then(res => {
          if (res.retCode == "00000") {
            that.content = res.data.list.filter(v => {
              return v.id == info.id;
            })[0].content;
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style scoped>
.user-content {
  flex: 1;
  min-width: 1200px;
}
.user-title {
  width: 100%;
  height: 82px;
  background-color: #f0efef;
  font-family: PingFangSC-Medium;
  font-size: 21px;
  display: flex;
  align-items: center;
}
.user-title p {
  width: 1200px;
  margin: 0 auto;
}
.container .wrap {
  width: 1200px;
  margin: 0 auto 0;
  background: #fff;
  padding: 10px;
}
.wrap h1 {
  text-align: center;
  font-size: 38px;
}
.wrap h3 {
  text-align: center;
}
.wrap .time {
  text-align: center;
  color: #ccc;
  margin-top: 15px;
}
</style>
<style>
.el-breadcrumb {
  width: 1200px;
  margin: 0 auto;
}
</style>
